<template>
  <el-main class="container-box">
    <div class="container-content">
      <h4>课程配置</h4>
      <el-form label-position="top" label-width="210px">
        <el-form-item label="配置团队成员可见课程:">
          <el-checkbox-group v-model="courses">
            <br>
            <div class="form-item">
              <el-checkbox class="form-item-check-box" :label="20">C++语言基础</el-checkbox>
              <div class="desc">
                <span>
                  计算机基础、输入输出、条件语句、循环语句、数组、字符串、函数、机构体、指针等
                </span>
              </div>
              <div class="btn-box">
                <el-button type='primary' link @click="showCourse(20)">查看课程</el-button>
              </div>
            </div>
            <div class="form-item">
              <el-checkbox class="form-item-check-box" :label="21">普及组L1</el-checkbox>
              <div class="desc">
                <span>
                  高精度、递归、排序、贪心、链表、深度优先搜索、广度优先搜索等
                </span>
              </div>
              <div class="btn-box">
                <el-button type='primary' link @click="showCourse(21)">查看课程</el-button>
              </div>
            </div>
            <div class="form-item">
              <el-checkbox class="form-item-check-box" :label="22">普及组L2</el-checkbox>
              <div class="desc">
                <span>
                  动态规划、STL、哈希表、树的基础、图的基础等基础数据结构与算法
                </span>
              </div>
              <div class="btn-box">
                <el-button type='primary' link @click="showCourse(22)">查看课程</el-button>
              </div>
            </div>
            <div class="form-item">
              <el-checkbox class="form-item-check-box" :label="23">提高组L1</el-checkbox>
              <div class="desc">
                <span>
                  进一步的算法探究，如分治、字符串算法、树上问题的算法等
                </span>
              </div>
              <div class="btn-box">
                <el-button type='primary' link @click="showCourse(23)">查看课程</el-button>
              </div>
            </div>
            <div class="form-item">
              <el-checkbox class="form-item-check-box" :label="24">提高组L2</el-checkbox>
              <div class="desc">
                <span>
                  更深入的算法学习，如各类动态规划问题扩展、图论问题扩展、概率论及线性代数相关问题等
                </span>
              </div>
              <div class="btn-box">
                <el-button type='primary' link @click="showCourse(24)">查看课程</el-button>
              </div>
            </div>
          </el-checkbox-group>
        </el-form-item>
        <el-button type="primary" size="default" @click="start">刷新</el-button>
        <el-button type="primary" size="default" @click="submitupdateteamcoursegroup">保存</el-button>
      </el-form>
    </div>
    <div class="container-right">
      <el-table class="container-right-table" stripe :data="courseData">
        <template v-slot:empty>
          <el-empty image="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/image/ojSass-empty.png" />
        </template>
        <el-table-column prop="name" label="课程名" width="">
          <template #default="{ row }">
            {{ row.course.name }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-main>
</template>

<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { computed, onMounted, ref } from "vue";
import { useStore } from "vuex";
import { asyncselectpackagekey, asyncselectteamcoursegroup, asyncupdateteamcoursegroup } from "../../../api";
import { Storekey } from "../../../interface";
import Alymodel from "../../../mysql_interface/model";

const store = useStore(Storekey)
// 当前登录用户
const user = computed(() => {
  return store.state.user;
});
const teamid = computed(() => {
  return user.value?.teamid;
});

const courses = ref<any[]>([])
function selectteamcoursegroup() {
  asyncselectteamcoursegroup({ teamid: teamid.value }).then(e => {
    courses.value = e.rows.map(e => e.coursegroupid)
  })
}
// 保存
function submitupdateteamcoursegroup() {
  asyncupdateteamcoursegroup({ teamid: Number(teamid.value), courses: courses.value }).then(e => {
    ElMessage.success("保存成功");
  }).catch(f => {
    ElMessage.error(f);
  })
}

async function start() {
  selectteamcoursegroup()
}

onMounted(() => {
  start();
  showCourse(20)
});

const courseData = ref<Alymodel.IMpackege[]>([])
// 
async function showCourse(id: number) {
  const { rows, count } = await asyncselectpackagekey({ ID: id })
  courseData.value = (rows[0]?.packege || []).sort((a, b) => {
    return (a?.course?.paixu || 0) - (b?.course?.paixu || 0)
  })
}
</script>

<style scoped>
.container-box {
  display: flex;
}

.container-content {
  margin: 0;
}

.form-item {
  margin: 30px;
  width: 100%;
  display: flex;
  align-items: flex-start;
}

.form-item-check-box {
  width: 110px;
  font-size: 14px !important;
}

.desc {
  margin: 0 40px;
  font-size: 14px;
  color: #7f7f7f;
  width: 400px;
  line-height: 30px;
}

.btn-box {
  line-height: 30px;
}

.container-right,
.container-right-table {
  width: 30vw;
  height: 80vh;
}
</style>